import { ExpeditionOrderSetup } from './expeditionOrder';
import { Forbidden } from './forbidden';
import { OptionMinute } from './option-minute';
import { OptionSwitch } from './option-switch';
import { Option } from './option';
import { AppStore } from './../../services/appStore';
import { OrderSetup } from './order';
import { DisplaySetup } from './display';
import { ResetSetup } from './reset';
import { SoundSetup } from './sound';
import { Component, Directive, ElementRef, OnDestroy } from '@angular/core';



@Component({
    selector: 'setup',
    styleUrls: ['./index.scss'],
    template: `
        <div class="setup-container">
            <ul class="nav">
                <li *ngFor="let route of routes" [routerLink]="[route.url]" routerLinkActive="active">
                    <i [class]="route.icon + ' iconfont'"></i><span>{{route.title}}</span>
                </li>
            </ul>
            <div class="main">
                <router-outlet></router-outlet>
            </div>
        </div>
    `,
    providers: []
})
export class Setup implements OnDestroy {
    orders: any;
    constructor(public appStore: AppStore) {
    }

    routes: routeModel[] = SetupService.current.route.children

    ngOnInit() {

    }
    ngOnDestroy() {
        this.appStore.orderStore.actions.resetAllOrders();
    }
}


export interface routeModel {
    path: string;
    component: any;
    title: string;
    name?: string;
    className?: string;
    children?: routeModel[];
    url?: string;
    icon?: string;
}


export class SetupService {
    static current = new SetupService();
    components: Array<any> = [OptionSwitch, OptionMinute, Option];
    route: routeModel = {
        path: 'setup', component: Setup, title: "设置", url: "setup",//redirectTo
        children: [
            { path: 'order', component: OrderSetup, title: "订单设置", url: "/setup/order", icon: "icon-order-setup" },
            { path: 'sound', component: SoundSetup, title: "声音提示", url: "/setup/sound", icon: "icon-sound-setup" },
            { path: 'expeditionOrder', component: ExpeditionOrderSetup, title: "出品单设置", url: "/setup/expeditionOrder", icon: "icon-reset" },
            { path: 'display', component: DisplaySetup, title: "显示方案", url: "/setup/display", icon: "icon-solution" },
            { path: 'reset', component: ResetSetup, title: "重置终端", url: "/setup/reset", icon: "icon-reset" },
            { path: 'forbidden', component: Forbidden, title: "出品台开关", url: "/setup/forbidden", icon: "icon-done-circle" }
        ]
    }
    forRoot() {
        function traverse(data) {
            let arr = [];
            arr.push(data.component);
            for (let key in data) {
                if (Array.isArray(data[key])) {
                    data[key].forEach(v => {
                        arr = arr.concat(traverse(v))
                    })
                }
            }
            return arr;
        }
        let components = traverse(this.route);
        return components.concat(this.components);
    }
}